export default {
    data: {
        title: "",
        isShow:false
    },
    onShow(){
        this.draw();
    },
    draw(){
        var el = this.$refs.canvas;
        var ctx = el.getContext('2d',{ antialias: true });

        //填充的颜色
        ctx.fillStyle = "darkgray";
        //填充矩形  fillRect(起始X,起始Y,终点X,终点Y)
        ctx.fillRect(0, 0, 400, 100);


        ctx.fillStyle = "#fff";
        //绘制填充文字
        ctx.fillText("刮刮卡", 180, 50);

        let isDraw = false;


        el.touchstart = function () {
            isDraw = true;
        };

        el.touchmove = function (e) {
            if (isDraw) return;

            //计算鼠标在canvas里的位置
            const x = e.globalX - el.localX;
            const y = e.globalY - el.localY;

            //设置globalCompositeOperation
            ctx.globalCompositeOperation = "destination-out";

            //画圆
            ctx.arc(x, y, 10, 0, 2 * Math.PI);
            //填充圆形
            ctx.fill();

            this.isShow = true;

        };

        el.touchend = function () {
            isDraw = false;
        };

    }

}
